<template>
  <div class="card flex-1">
    <h2 class="flex justify-between">
      <span class="text-lg font-bold">公路客货运输总周转量</span>
      <span>兵团排名 <span class="text-lg font-bold">NO.5</span></span>
    </h2>
    <div class="grid grid-cols-2 gap-4 mb-6">
      <div class="bg-blue-50 p-4 rounded-lg">
        <p class="text-3xl font-bold text-blue-800">
          {{ resList[props.yearStr].value }} <span class="unit">万吨公里</span>
        </p>
        <p class="text-sm text-gray-600">总周转量</p>
      </div>
      <div class="bg-green-50 p-4 rounded-lg">
        <p class="text-3xl font-bold text-green-800">
          {{ resList[props.yearStr].growthRate }}<span class="unit">%</span>
        </p>
        <p class="text-sm text-gray-600">增速</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  yearStr: String,
})
// 产业占比数据
const resList = ref({
  2024: {
    value: 5260,
    growthRate: 5.0,
  },
  2023: {
    value: 4588,
    growthRate: 5.0,
  },
  2022: {
    value: 4955,
    growthRate: 4.8,
  },
  2021: {
    value: 4752,
    growthRate: 5.4,
  },
  2020: {
    value: 4003.4, // 总周转量(万吨公里)
    growthRate: 7.0, // 增速
  },
})
</script>

<style></style>
